.editor-sidebar {
    position: fixed;
    top: 46px;
    right: -$sidebar-width-max;
    bottom: 0;
	display: flex;
	flex-direction: column;
	z-index: z-index( 'root', '.editor-sidebar' );
	background: var( --color-neutral-0 );
	border-left: 1px solid var( --color-neutral-5 );
	border-top: 1px solid var( --color-neutral-5 );
	border-right: none;
	box-sizing: border-box;
	left: auto;
	transition: all 0.15s cubic-bezier( 0.075, 0.82, 0.165, 1 );
	overflow-x: hidden;

	.focus-sidebar & {
		transform: translateX( -$sidebar-width-max );
	}

	.focus-sidebar .is-loading & {
		transition: none;
	}

	@include breakpoint-deprecated( '>660px' ) {
		border-right: 1px solid var( --color-neutral-5 );
		width: $sidebar-width-max;
	}


	@include breakpoint-deprecated( '<660px' ) {
		position: relative;
		top: 0;
		left: 0;
		height: 0;
		transition: none;
		border-left: none;

		.focus-sidebar & {
			height: auto;
			transform: none;
			transition: none;
		}
	}
}

.editor-sidebar .sidebar__footer {
  height: 45px;
	align-items: center;
	padding: 0;
	border-top: 1px solid var( --color-neutral-5 );
	margin: auto 0 0;
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	padding-left: 10px;

	.button.is-active {
		background: var( --color-accent );

		.gridicon {
			fill: var( --color-text-inverted );
		}
	}
}

.editor-sidebar__header {
	align-items: center;
	background: var( --color-neutral-0 );
	color: var( --color-neutral-70 );
	display: flex;
	flex-shrink: 0;
	font-size: $font-body-small;
	font-weight: 600;
	justify-content: space-between;
	padding: 11px 15px 11px 16px;
}

.editor-sidebar__close.button.is-compact.is-borderless {
	display: none;
	align-self: center;
	line-height: 12px;
	padding: 8px;
	white-space: nowrap;
	max-width: 50%;

	@include breakpoint-deprecated( '>660px' ) {
		display: block;
	}
}

.editor-sidebar__toggle-sidebar {
	margin-left: 16px;
	@include breakpoint-deprecated( '>660px' ) {
		display: none;
	}
}

.editor-sidebar__nonscrolling-region {
	overflow: hidden;
}

.editor-sidebar__header-title {
	padding: 0;
	font-size: $font-body-small;
	line-height: inherit;

	// Needed for extra specificity over .button style
	&.button {
		color: var( --color-neutral-70 );

		&:hover {
			color: var( --color-accent );
		}
	}
}
